<template>
  <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-button type="primary" @click="EditAddAccountholdBtn">新增</el-button>
          <el-button type="info" plain>修改</el-button>
          <el-button type="info" plain @click="EditChangePasswordholdBtn">修改密码</el-button>
          <el-button type="info" plain>冻结/解冻</el-button>
        </el-col>
      </el-row>
      <el-table
      :data="tableData"
      style="width: 100%"
      ref="multipleTable"
      stripe
      border
      class = "Account-table"
      @select="select"
      @select-all="selectAll"
      :default-sort = "{prop: 'date', order: 'descending'}"
    > <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        sortable>
      </el-table-column>
      <el-table-column
        prop="role"
        label="角色">
      </el-table-column>
      <el-table-column
        prop="account"
        label="交易账户">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="创建时间">
      </el-table-column>
    </el-table>
    <el-dialog
        title="修改密码"
        :visible.sync="editChangePassword"
        width="25%">
      <changePassword></changePassword>
    </el-dialog>
    <el-dialog
        title="新增账户"
        :visible.sync="editAddAccount"
        width="35%">
      <addAccount></addAccount>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import changePassword from './component/changePassword'
import addAccount from './component/addAccount'
export default {
  name: 'Account',
  components: {changePassword,addAccount},
  data () {
    return {
      tableData: [],
      editChangePassword: false, //显示修改密码界面
      editAddAccount: false, //显示新增账户界面
    }
  },
  methods: {
    formatter (row) {
      return row.address
    },
    // 多选框，同一时间只能选中一个
    select (selection) {
      console.log(selection.length)
      if (selection.length > 1) {
        // console.log(selection.shift())
        // eslint-disable-next-line camelcase
        this.del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(this.del_row, false)
      }
    },
    selectAll (selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    EditAddAccountholdBtn () {
      this.editAddAccount = true
    },
    EditChangePasswordholdBtn () {
      this.editChangePassword = true
    }
  },
  created () {
    axios.get('/api/account').then(response => {
      this.tableData = response.data.data
      console.log(response.data.data)
    })
  }
}
</script>

<style scoped>

</style>
